// 动画组件
// 动画是在一定时间内,平滑的更新UI外观, 而形成的一种连续的视觉效果
/* 
AnimationController: 设置动画时间,控制动画执行,监听动画执行
Animation组件: 设置起始和结束状态
Tween组件: 是专门用于定义起始和结束状态的 */

/* 学习内容:
1. 平移动画
2. 缩放动画 */

// 平移动画
// 需求: 在2秒钟内,平移红色色块

// 1. 实现步骤
// 1. Flutter 提供了专门制作平移动画的组件SlideTransition
// 2. 使用Position属性接收动画起始和终止状态
// 3. 使用AnimationController和Animation来设置动画时间,设置起始和终止状态
// 2. 实现步骤:
// 1. 创建AnimationController
// 2. 创建Animation
// 3. 将动画状态设置给SlideTransition组件的position属性
// 4. 启动动画(控制动画)
// 5. 销户动画

import 'package:flutter/material.dart';

class AnimationWidget extends StatefulWidget {
  const AnimationWidget({super.key});

  @override
  State<AnimationWidget> createState() => _AnimationWidgetState();
}

// with SingleTickerProviderStateMixin 混入TikerProvider, 保证状态组件
// 可以监听屏幕刷新
class _AnimationWidgetState extends State<AnimationWidget>
    with SingleTickerProviderStateMixin {
  //1. 创建动画控制器
  late AnimationController _animationController;
  //2. 创建动画对象
  late Animation<Offset> _animation;

  //状态初始化钩子
  void initState() {
    // 3.创建动画控制器
    // vsync: 监听屏幕刷新的,可以避免屏幕外的动画,如果动画不在可展示区域,为了节省资源,动画需要停止
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    // 4.创建动画对象
    _animation = Tween<Offset>(
      begin: Offset.zero,
      end: Offset(2.0, 2.0),
    ).animate(_animationController);
    // 5.启动动画
    // _animationController.forward();
    // 6.循环动画
    _animationController.repeat();
    // 7.反向动画
    // _animationController.reverse();
    super.initState();
  }

  @override
  void dispose() {
    // 6.销毁动画
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: const Text('动画组件平移'),
      ),
      body: Center(
        child: SlideTransition(
          position: _animation,
          child: Container(width: 100, height: 100, color: Colors.purple),
        ),
      ),
    );
  }
}
